<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Add i18n support"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Add i18n support</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-171CFF69-E89C-453F-9309-9EEAC68444CB]--><body><div id="content"><div class="header"><h1>
Add i18n support</h1><div id="breadcrumb"></div></div>
    <p id="GUID-E1E2D888-5959-4851-A269-B376C8BB3334">
Currently, in the Demo widget, there are some hard-coded English
language strings:
</p>
    <ul purpose="ul" id="UL_E9F6BB3063D0494D8DD04600792D99E0">
      <li purpose="li" id="LI_7BCDA8275D7246688256EF995A57BC58">I am a demo widget.</li>
      <li purpose="li" id="LI_1EA70B6560E44A61AE0778A54E3EF10D">This is configurable.
</li>
    </ul>
    <p id="GUID-38D072AB-91F5-4C9B-AA83-C05AE856963E">To internationalize the UI, isolate these
strings in a separate language-specific resource file and reference
the strings by their identity. Dojo provides complete i18n support,
which is sensitive to user settings in the browser. For example, if
Chinese translation is defined, and a user visits your web
application with their browser language code set to zh-cn, they
automatically get the Chinese UI. For more information, see
<a target="_blank" class="xref" href="http://dojotoolkit.org/documentation/tutorials/1.8/i18n/" rel="http://dojotoolkit.org/documentation/tutorials/1.8/i18n/">http://dojotoolkit.org/documentation/tutorials/1.8/i18n/</a>.
</p>
    <p id="GUID-096F8D12-F9F0-492E-BA94-50EC9319C442">The first step is to abstract the user interface strings to the
default resource file. The user determines the translation of these
strings.</p>
    <p id="GUID-EFDD620B-586E-49CC-A4D7-66281A7799A2">Open the nls/strings.js file with a text editor. Add the
following:</p>
    <div class="codeblock" purpose="codeblock">
      
      <div class="highlight"><pre><code><span class="nx">define</span><span class="p">({</span>
    <span class="nx">root</span><span class="o">:</span><span class="p">{</span>
        <span class="nx">label1</span><span class="o">:</span> <span class="s2">&quot;I am a demo widget.&quot;</span><span class="p">,</span>
        <span class="nx">label2</span><span class="o">:</span> <span class="s2">&quot;This is configurable.&quot;</span>
    <span class="p">},</span>
    <span class="s2">&quot;zh-cn&quot;</span><span class="o">:</span> <span class="kc">true</span>    
<span class="p">});</span>
</code></pre></div>

    </div>
    <p id="GUID-07A2565D-E097-46D8-881D-74A7109CD205">Create a folder named zh-cn and create a strings.js file in it. The
following is the content:
</p>
    <div class="codeblock" purpose="codeblock">
      
      <div class="highlight"><pre><code><span class="nx">define</span><span class="p">({</span>
    <span class="nx">label1</span> <span class="o">:</span> <span class="s2">&quot;我是一个演示widget。&quot;</span><span class="p">,</span>
    <span class="nx">label2</span> <span class="o">:</span> <span class="s2">&quot;这里可以配置。&quot;</span>
<span class="p">});</span>
</code></pre></div>

    </div>
    <p id="GUID-E5397007-4AED-439C-BB91-9A71FB900073">Apply the changes to the template by removing the hard-coded
English language and replacing it with markers:
</p>
    <div class="codeblock" purpose="codeblock">
      
      <div class="highlight"><pre><code><span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;div&gt;</span>${nls.label1}.<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div&gt;</span>${nls.label2}.[${config.configText}]<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>

    </div>
    <p id="GUID-1B42DADC-1743-48D0-9B82-3BF76C6E1AFF">Reload your application. This time, add a URL
parameter, locale=zh-cn, or you change the browser's
locale configuration to view the change.
</p>
    <p id="GUID-E1DA21BF-2B5D-40B4-B7DA-EB51A17FC79C">
      <img purpose="img" placement="inline" alt="Localization" title="Localization" src="03w3/GUID-FA2693BA-108C-4B25-B512-DA6B82083535-web.png">
    </p>
    <p id="GUID-688F31F4-F912-4E4E-9D58-EBCFEB1E2800">To support specific languages, create folders under the nls/
folder, named by the language code (for example, en, fr, ru). Copy
the strings.js file to that folder and update the content to
reflect the language for that code.
</p>
    <p id="GUID-22E9A31B-0890-4432-BF09-699B69E0CD62"> To internationalize the widget display name, use  _widgetLabel  as the string key in strings.js:</p>
    <div class="codeblock" purpose="codeblock">
      
      <div class="highlight"><pre><code><span class="nx">define</span><span class="p">({</span>
    <span class="nx">root</span><span class="o">:</span><span class="p">{</span>
        <span class="nx">label1</span><span class="o">:</span> <span class="s2">&quot;I am a demo widget.&quot;</span><span class="p">,</span>
        <span class="nx">label2</span><span class="o">:</span> <span class="s2">&quot;This is configurable.&quot;</span><span class="p">,</span>
        <span class="nx">_widgetLabel</span><span class="o">:</span> <span class="s2">&quot;Demo&quot;</span>
    <span class="p">},</span>
    <span class="s2">&quot;zh-cn&quot;</span><span class="o">:</span> <span class="kc">true</span>    
<span class="p">});</span>
</code></pre></div>

    </div>
  <p id="GUID-177F3E29-3653-4549-BD63-3A3D547EE3C7">There are some languages that read from right-to-left (RTL), see <a target="_blank" class="xref" rel="https://developers.arcgis.com/web-appbuilder/guide/create-a-theme.htm#esri_section1_3c9aa880840f4dd9a160a0d98c59cad6" href="https://developers.arcgis.com/web-appbuilder/guide/create-a-theme.htm#esri_section1_3c9aa880840f4dd9a160a0d98c59cad6">Support RTL</a>.</p><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>